<template>
	<view class="page"  :class="'theme-' + ocmTheme">
		<u-no-network></u-no-network>
		<u-toast ref="uToast" />
		<view class="head-box">
			<view>
				<u-navbar :border-bottom='false' title-bold="true" style="font-weight: 1200;" :is-back="false" background="" title="一点">
					<view class="slot-wrap" style="display: flex;flex:1">
						<view class="drop-shadow inner-shadow search-box" style="margin-left: 30rpx;" @click="toSearch()">
							<view class="iconfont icon-search-2-copy"  style="height:30px;width:30px;"></view>
						</view>
						
					</view>
				</u-navbar>
					
			</view>
		</view>
		<scroll-view  class="content" :style="{height:screenHeight-44 + 'px'}" :scroll-y="true"    >
			<view class="title-box">
				<view class="left-box">
					<view>
						<text class="title">欢迎您</text>
					</view>
					<view>
						<text class="text">今天，也是充满希望的一天</text>
					</view>
				</view>
				<view class="drop-shadow inner-shadow right-box"  @click="changeColor('black')">
					<i  class="iconfont icon-qiehuan-"  style="height:65rpx;width:65rpx;"></i>
				</view>
				
			</view>
			<view class="swiper-box">
				<yd-swiper :swiperList='swiperDate' ></yd-swiper>
			</view>
			<!--滑动菜单-->
			<grid-menu-list :list_data='gridMenuData' @listTap='gridMenuTap'/>
			
			<image style="margin-bottom: 30rpx;" src="../../../static/img-coupon-banner.png" mode="aspectFill" class="tui-img__coupon" @tap="coupon"></image>
			<new-good ></new-good>
			<view class="tui-product-box">
				<!--秒杀-->
				<view class="tui-block__box ">
					<view class="tui-group-name">
						<view class="tui-seckill__box">
							<image src="https://thorui.cn/images/mall/img_home_seckill_3x.png" class="tui-seckill__img" mode="widthFix"></image>
							<view class="tui-countdown__box">
								<view class="tui-countdown__title">距结束</view>
								<view class="tui-flex__center">
									<yd-countdown :time="3800" backgroundColor="transparent" borderColor="transparent" color="#EB0909" colonColor="#EB0909"></yd-countdown>
								</view>
							</view>
						</view>
						<view class="tui-more__box" @tap="seckill(1)">
							<text style="font-size: 24rpx;color: #999;">更多</text>
							<u-icon name="arrow-right" :size="24" color="#999"></u-icon>
						</view>
					</view>
					<scroll-view scroll-x>
						<view class="tui-goods__list">
							<view class="tui-goods__item" @tap="seckill(2)" v-for="(item, index) in 8" :key="index">
								<view class="tui-goods__imgbox">
									<image :src="`/static/img/${index % 2 == 0 ? 'goods_06' : 'goods_09'}.png`" mode="widthFix" class="tui-goods__img"></image>
								</view>
								<view class="tui-pri__box">
									<view class="tui-sale-pri">
										<view class="tui-size-sm">¥</view>
										<view>298</view>
										<view class="tui-size-sm">.50</view>
									</view>
								</view>
								<view class="tui-original__pri">¥399.00</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<!--超值拼团-->
				<view class="tui-block__box tui-mtop__20" style="margin-bottom: 50rpx;">
					<view class="tui-group-name">
						<view>
							<text>超值拼团</text>
							<text class="tui-sub__desc tui-color__pink">拼着买更便宜</text>
						</view>
						<view class="tui-more__box" @tap="group(1)">
							<text style="font-size: 24rpx;color: #999;">更多</text>
							<u-icon name="arrow-right" :size="24" color="#999"></u-icon>
						</view>
					</view>
					<scroll-view scroll-x>
						<view class="tui-goods__list">
							<view class="tui-goods__item" @tap="group(2)" v-for="(item, index) in 8" :key="index">
								<view class="tui-goods__imgbox">
									<image :src="`/static/img/goods_0${index}.png`" mode="widthFix" class="tui-goods__img"></image>
								</view>
								<view class="tui-pri__box">
									<view class="tui-sale-pri">
										<view class="tui-size-sm">¥</view>
										<view>298</view>
										<view class="tui-size-sm">.50</view>
									</view>
								</view>
								<view class="tui-original__pri">¥399.00</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			
			<yd-sticky bg-color="rgba(0,0,0,0)" :offset-top="stickyHeight" @fixed="allowTouchMove()" @unfixed="stopTouchMove()">
				<view  class="u-tabs-box" >
					<u-tabs-swiper class="u-tabs" bg-color="rgba(0,0,0,0)"  name="categoryName"  activeColor="#1000f2" ref="tabs" :list="ocmCategory" :current="current" @change="change" :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
				</view>
			</yd-sticky>
			
			<view class="product-list-box" >
					
		
				<swiper :style="{height:productListHeight+'px'}" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish">
					<swiper-item >
						<scroll-view @scrolltolower="nextPage" :scroll-y="allowMove" style="height: 100%;"  class="wrap">
							<goodsList :list_data="goodsData" @listTap="goodsListTap"/>
						</scroll-view>					
					</swiper-item>
							
					<swiper-item >
						<scroll-view :scroll-y="allowMove" style="height: 100%;"  class="wrap">
							<view style="margin-top: 20vh;" v-if="blankShow">
								<u-empty text="未找到搜索结果,换个关键词试试" mode="search" ></u-empty>
							</view>
							
						</scroll-view>					
					</swiper-item>
					
					<swiper-item >
						<scroll-view :scroll-y="allowMove" style="height: 100%;"  class="wrap">
							<view style="margin-top: 20vh;" v-if="blankShow">
								<u-empty text="未找到搜索结果,换个关键词试试" mode="search" ></u-empty>
							</view>
							
						</scroll-view>					
					</swiper-item>
						
									
				</swiper>
			</view>
			</scroll-view>
		
		</view>
	
	
</template>

<script>
	import gridMenuList from '@/components/list/grid-menu-list';
	import _home_data from '@/static/zaiui/data/home.js';
	import goodsList from '@/components/list/product-list.vue';

export default {
	components: { 
		gridMenuList,goodsList
	},
	computed: {
		ocmCategory(){
		     return this.categoryList
		},
		blankShow() {
			return true;
		},
		hasNext(){
			return this.pageMax>this.query.current
		}
	},
	data() {
		return {
			headHeight:0,
			productListHeight:0,
			screenHeight:0,
			stickyHeight:100,
			allowMove:false,
			productList_height:300,
			gridMenuData:[],
			goodsData: [],
			goodsTabData:[],
			categoryList: [
				{
					name: '首页'
				}, {
					name: '办公'
				}, {
					name: '家电',
				},{
					name: '服饰',
				},{
					name: '日用',
				},{
					name: '书籍',
				},{
					name: '蔬果',
				},{
					name: '文具',
				},
			],
			query:{
				current:1,
				size:4
			},
			pageMax:1,
			swiperDate:{},
			current: 0,
			swiperCurrent: 0,
			tabsHeight: 0,
		}
	},
	async created() {
		this.$u.api.menuTree({menuLocation:1}).then(res=>{
			this.gridMenuData=res
			
		})
		this.$u.api.swiperList({swiperLocation:1}).then(res=>{
			this.swiperDate=res
		})
		let recommendData = _home_data.recommend();
		this.onSearch()
		
		
	},
	onLoad() {
		
	
	},
	onReady() {
		
		const query = uni.createSelectorQuery().in(this);
		let that=this;
	
		
		query.select(".head-box").boundingClientRect(data => {
			this.headHeight= data.height;
			uni.getSystemInfo({ 
				success: function (res) {
					that.screenHeight=res.windowHeight-res.statusBarHeight;
					that.stickyHeight=( that.headHeight * (750 / res.windowWidth))+3  //将px 转换rpx
					that.productListHeight=res.windowHeight-that.headHeight-40;
				}
            });
		}).exec();
	},
	onReachBottom() {
		
	},
	onLoad() {
	
	},
	methods:{
		goodsListTap(index,data){
			console.log(data)
			this.$u.route({
				url:'/pages/productDetail/productDetail?spuId='+data.spuId+"&shopId="+data.shopId,
				
			})	
		},
		onSearch(isNew=false){
			this.query.current=1
			this.$u.api.searchProduct(this.query).then(res=>{
				this.goodsData=res.records[0].spuESList
				this.pageMax=res.pages
				
			})
		},
		nextPage(){
			if(this.hasNext){
				this.query.current+=1
				this.$u.api.searchProduct(this.query).then(res=>{
					this.goodsData=this.goodsData.concat(res.records[0].spuESList)
				})
			}
		},
		//主菜单被单击
		gridMenuTap(e) {
			uni.navigateTo({
				url: e.data.menuPath
			});
		},
		// tab栏切换
		change(index) {
			this.swiperCurrent = index;
		},
		
		transition({ detail: { dx } }) {
			this.$refs.tabs.setDx(dx);
		},
		animationfinish({ detail: { current } }) {
			this.$refs.tabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
		},
		changeColor(color){
			
			this.$store.commit('setOcmTheme', color)
			
		
		
		},
		group(){
			console.log("ww")
			
		},
		seckill(type) {
	
			let url = type == 1 ? '/pages/index/seckillList/seckillList' : '/pages/index/seckillDetail/seckillDetail';
			uni.navigateTo({
				url:'/pages/productDetail/productDetail'
			})
		
		},
		toSearch(){
			uni.navigateTo({
				url:'/pages/search/search'
			})
		},
		
		allowTouchMove(){
			this.allowMove=true
		},
		stopTouchMove(){
			this.allowMove=false
		},
		

	}
	
}
</script>

<style lang="scss">
@import '/index.scss'
</style>
